<!-- 爱日历 -->
<template>
  <div class="a-date">
    <div class="date">
      <div class="date-top">
        <div class="icon">
          <i class="fa fa-chevron-left" style="padding-right: 3px;" @click="beforMoth()"></i>
        </div>
        <span>
          <span style="font-weight: bold;">{{ pikerDateYear }} 年</span>
          <br />
          <span>{{ pikerDateMoth }} 月</span>
        </span>
        <div class="icon">
          <i class="fa fa-chevron-right" style="padding-left: 3px;" @click="nextMoth()"></i>
        </div>
      </div>
      <div class="date-title">
        <span class="week-day">日</span>
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span class="week-day">六</span>
      </div>
      <div class="date-day">
        <div :class="{ 'active-week': indexDay === chioceWeek }" class="date-day-line" v-for="(item, indexDay) in day"
          :index="indexDay" :title="indexDay + '===' + chioceWeek">
          <span @click="choiceDateFun($event, index)" :class="{
            now: item.type === 'now',
            active:
              item.year === chioceYear &&
              item.moth === chioceMoth &&
              item.date === chioceDate,
            today:
              item.year === today.year &&
              item.moth === today.moth &&
              item.date === today.date,
            'week-day': parseInt(index % 7) === 0 || parseInt(index % 7) === 6
          }" v-for="(item, index) in date" v-if="index < 7 * (indexDay + 1) && index >= 7 * indexDay">
            {{ item.date }}
            <div class="tag" v-if="tagMap[item.year + '-' + item.moth + '-' + item.date]"></div>
          </span>
        </div>
      </div>
      <div class="bottm-title">
        Alife - Awork
        <div class="today" @click="toToday()">今</div>
      </div>
    </div>
  </div>
</template>

<script>
import { globalBus } from "@/assets/js/globalBus.js";

const nedb = require("nedb");

export default {
  name: "ADate",
  props: {
    select: {
      type: Boolean,
      defaultValue: false
    },
    value: {
      type: Object
    }
  },
  data() {
    return {
      date: [],
      day: [], //周
      pickerDate: undefined, //日历
      pikerDateYear: "",
      pikerDateMoth: "",
      pikerIndex: "", //当前选中的是数组哪一个

      chioceYear: "", //选中年份
      chioceMoth: "", //选中月份
      chioceDate: "", //选中日期
      chioceWeek: "", //选中周

      //Aplane 交互
      aPlane: {
        changeShowType: "moth"
      },
      //今天日期
      today: {
        year: "",
        moth: "",
        date: ""
      },
      tagMap: {}
    };
  },
  watch: {
    value() {
      this.initToday();
    }
  },
  beforeDestroy() {
    globalBus.$off("aDate_getDateList", this.getDateList);
    globalBus.$off("aData_doTag", this.doTag());
    globalBus.$off("aDate_getDate", this.getChoiceDate());
  },
  created() {
    if (this.select) {
      return;
    }
    globalBus.$on("aDate_getDateList", this.getDateList);
    globalBus.$on("aData_doTag", this.doTag());
    globalBus.$on("aDate_getDate", this.getChoiceDate());
  },
  methods: {
    getChoiceDate() {
      let _this = this;
      globalBus.$emit("aDate_changeDateBack", {
        year: _this.chioceYear,
        moth: _this.chioceMoth,
        date: _this.chioceDate,
        week: _this.chioceWeek
      });
    },
    //打标
    doTag() {
      if (!this.date || this.date.length === 0) {
        return
      }
      let _this = this;
      let before = _this.date[0]
      let now = _this.date[parseInt(_this.date.length / 2)]
      let after = _this.date[_this.date.length - 1]
      let fun = (year, moth) => {
        let aplaneTodoDb = new nedb({
          filename: "/data/aplane-todo_" + year + "-" + moth + ".db",
          autoload: true
        });
        aplaneTodoDb.find({
          year: year,
          moth: moth
        },
          (err, docs) => {
            docs.forEach(v => {
              _this.$set(_this.tagMap, v.year + '-' + v.moth + '-' + v.date, true)
            })
          })
      }
      fun(before.year, before.moth)
      if (before.year != now.year || before.moth != now.moth) {
        fun(now.year, now.moth)
      }
      if (after.year != now.year || after.moth != now.moth) {
        fun(after.year, after.moth)
      }
    },
    //回到当天
    toToday() {
      if (this.select) {
        const date = new Date();
        this.$emit("selected", {
          date: date.getDate(),
          month: date.getMonth(),
          year: date.getFullYear()
        });
        return;
      }
      this.initToday();
      this.getDateList(this.aPlane.changeShowType);
    },
    initToday() {
      let _this = this;
      this.pickerDate = new Date();
      if (this.value) {
        this.pickerDate.setFullYear(this.value.year);
        this.pickerDate.setMonth(this.value.month);
        this.pickerDate.setDate(this.value.date);
      }
      this.chioceYear = this.pickerDate.getFullYear();
      this.chioceMoth = this.pickerDate.getMonth();
      this.chioceDate = this.pickerDate.getDate();
      this.initDate();
      this.initDay();
      this.today = {
        year: this.chioceYear,
        moth: this.chioceMoth,
        date: this.chioceDate
      };
      if (!this.select) {
        globalBus.$emit("aDate_changeDateBack", {
          year: _this.chioceYear,
          moth: _this.chioceMoth,
          date: _this.chioceDate,
          week: _this.chioceWeek
        });
      }
      this.doTag()
    },
    getDateList(type) {
      this.aPlane.changeShowType = type;
      let _this = this;
      if (type === "moth") {
        globalBus.$emit("aPlane_changeShowTypeBack", {
          year: this.chioceYear,
          moth: this.chioceMoth,
          date: this.chioceDate
        });
      } else {
        if (this.chioceWeek === -1) {
          return;
        }
        let res = this.date.slice(
          7 * this.chioceWeek,
          7 * (parseInt(this.chioceWeek) + 1)
        );
        globalBus.$emit("aPlane_changeShowTypeBack", {
          year: this.chioceYear,
          moth: this.chioceMoth,
          date: this.chioceDate,
          dates: res
        });
      }

      globalBus.$emit("aDate_changeDateBack", {
        year: _this.chioceYear,
        moth: _this.chioceMoth,
        date: _this.chioceDate,
        week: _this.chioceWeek
      });
    },
    choiceDateFun(e, index) {
      let date = this.date[index];
      this.chioceYear = date.year;
      this.chioceMoth = date.moth;
      this.chioceDate = date.date;
      let parent = e.currentTarget.parentElement;
      this.chioceWeek = parseInt(parent.getAttribute("index"));
      if (this.select) {
        this.$emit("selected", {
          date: date.date,
          month: date.moth,
          year: date.year
        });
        return;
      }
      this.getDateList(this.aPlane.changeShowType);
    },
    beforMoth() {
      let currentDate = this.pickerDate;
      let nowYear = currentDate.getFullYear(); //得到年份
      let nowMonth = currentDate.getMonth() - 1; //得到月份
      let nowDate = currentDate.getDate(); //得到日期
      this.pickerDate = new Date(nowYear, nowMonth, nowDate);
      this.initDate();
    },
    nextMoth() {
      let currentDate = this.pickerDate;
      let nowYear = currentDate.getFullYear(); //得到年份
      let nowMonth = currentDate.getMonth() + 1; //得到月份
      let nowDate = currentDate.getDate(); //得到日期
      this.pickerDate = new Date(nowYear, nowMonth, nowDate);
      this.initDate();
    },
    initDate() {
      this.chioceWeek = -1;
      this.date.splice(0, this.date.length);
      let currentDate = this.pickerDate;
      let nowYear = currentDate.getFullYear(); //得到年份
      let nowMonth = currentDate.getMonth(); //得到月份
      this.pikerDateYear = nowYear;
      this.pikerDateMoth = nowMonth + 1;

      let setDate = new Date(nowYear, nowMonth, 1);
      let day = setDate.getDay(); //得到周几
      setDate.setDate(setDate.getDate() - 1);
      let date = setDate.getDate(); //得到日期
      //填充前日期
      let beforMothValue;
      let beforYearValue;
      if (nowMonth === 0) {
        beforMothValue = 11;
        beforYearValue = nowYear - 1;
      } else {
        beforYearValue = nowYear;
        beforMothValue = nowMonth - 1;
      }

      for (let x = day - 1; x >= 0; x--) {
        this.date.push({
          type: "befor",
          date: date - x,
          year: beforYearValue,
          moth: beforMothValue
        });
        if (
          beforYearValue === this.chioceYear &&
          beforMothValue === this.chioceMoth &&
          date - x === this.chioceDate
        ) {
          this.chioceWeek = Math.ceil(this.date.length / 7) - 1;
        }
      }

      //获取本月最后一天
      let monthEndDate = new Date(nowYear, nowMonth + 1, 0);
      for (let x = 1; x <= monthEndDate.getDate(); x++) {
        this.date.push({
          type: "now",
          date: x,
          year: nowYear,
          moth: nowMonth
        });
        if (
          nowYear === this.chioceYear &&
          nowMonth === this.chioceMoth &&
          x === this.chioceDate
        ) {
          this.chioceWeek = Math.ceil(this.date.length / 7) - 1;
        }
      }

      let nextMothValue;
      let nextYearValue;
      if (nowMonth === 11) {
        nextMothValue = 0;
        nextYearValue = nowYear + 1;
      } else {
        nextYearValue = nowYear;
        nextMothValue = nowMonth + 1;
      }
      for (let x = 1; this.date.length < 42; x++) {
        this.date.push({
          type: "after",
          date: x,
          year: nextYearValue,
          moth: nextMothValue
        });
        if (
          nextYearValue === this.chioceYear &&
          nextMothValue === this.chioceMoth &&
          x === this.chioceDate
        ) {
          this.chioceWeek = Math.ceil(this.date.length / 7) - 1;
        }
      }

      this.doTag();
    },
    //初始化周
    initDay() {
      this.day.splice(0, this.day.length);
      for (let x = 0; x < 6; x++) {
        this.day.push({
          index: x,
          type: "normal"
        });
      }
    }
  },
  mounted() {
    this.initToday();
  }
};
</script>

<style lang="less">
.theme-dark {
  .a-date {
    .date-title {
      color: #ffffff;

      .week-day {
        color: #b0bec5;
      }
    }

    .date {
      background-color: #000000;

      .date-day .date-day-line .now {
        color: #fff;
      }

      .date-top {
        color: #fff;

        .icon {

          .fa:hover {
            color: #1cacff;
            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.2);
          }

          .fa {
            background: #232327;
          }
        }
      }
    }
  }
}

.theme-light {
  .a-date {
    .date-title {
      color: #2f4752;

      .week-day {
        color: #b0bec5;
      }
    }

    .date {
      background-color: #fff;

      .date-day .date-day-line .now {
        color: #2f4752;
      }

      .date-top {
        color: #232327;

        .icon {

          .fa:hover {
            color: #1cacff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          }

          .fa {
            background: #ffffff;
          }
        }
      }
    }
  }
}


.a-date {
  padding: 10px;
  box-sizing: border-box;
  padding-bottom: 0;

  .date {
    font-size: 0.8rem;
    display: inline-block;
  }

  .date {
    padding: 20px;
    padding-bottom: 10px;
  }

  .date .date-top {
    display: flex;
    // color: #E3F2FD;
  }

  .date .date-top span {
    font-size: 0.8rem;
    text-align: center;
    flex: 1;
  }

  .date .date-top .icon {
    cursor: pointer;

    .fa:hover {
      color: #1cacff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .fa {
      line-height: 2rem;
      text-align: center;
      width: 2rem;
      height: 2rem;
      border-radius: 0.6rem;
      color: #51bfff;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    }
  }

  // .date .date-top span span:hover,
  // .date .date-top i:hover {
  //   color: #6dc9ff;
  // }

  .line {
    margin-top: 20px;
    margin-bottom: 10px;
    // background-color: #BBDEFB;
    width: 100%;
    height: 1px;
  }

  .date {
    .bottm-title {
      position: relative;
      width: 100%;
      text-align: center;
      line-height: 2rem;
      font-weight: bold;
      color: #9fa8da;

      .today {
        position: absolute;
        top: 6px;
        right: 10px;
        border: 1px #dcdcdc solid;
        border-radius: 20px;
        height: 1.2rem;
        width: 1.2rem;
        line-height: 1.2rem;
        color: #4f5f72;
        font-size: 0.6rem;
        cursor: pointer;
        transition: all 0.2s linear;
      }

      .today:hover {
        border: 1px #3692c7 solid;
        background: #ffffff;
        color: #3692c7;
      }
    }

    .date-title {
      display: flex;
      font-weight: bold;

      .week-day {
        color: #b0bec5;
      }
    }

    .date-title,
    .date-day .date-day-line {
      padding: 0px;
      margin: 2px 0;
      font-size: 0.8rem;
    }

    .date-day .date-day-line {
      color: #b0bec5;
      transition: all 0.1s linear;

      .today {
        background: var(--bs-primary-border-subtle);
        border-radius: 50%;
        color: #ffffff !important;
      }

      .today.now {
        color: #ffffff;
      }

      .week-day.now {
        color: #b0bec5;
      }
    }

    .date-day .date-day-line:hover,
    .date-day .active-week {
      background: rgba(105, 182, 255, 0.1);
      border-radius: 2rem;
    }

    .date-day .active-week {
      font-weight: bold;
    }

    .date-day .date-day-line .now {
      color: #2f4752;
    }

    .date-day .date-day-line .tag {
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background-color: var(--bs-primary);
      position: relative;
      left: 1.5rem;
      bottom: 1.7rem;
    }
  }

  .date .date-title span,
  .date .date-day .date-day-line span {
    text-align: center;
    height: 2rem;
    width: 2rem;
    line-height: 2rem;
    display: inline-block;
    margin: 0 2px;
  }

  .date .date-day .date-day-line span {
    cursor: pointer;
    transition: all 0.3s linear;
  }

  .date .date-day .date-day-line span:hover,
  .date .date-day .date-day-line .active {
    background: #6dc9ff;
    border-radius: 50%;
    color: #ffffff !important;
  }
}
</style>
